<!DOCTYPE html>
<!--
Copyright 2011 Google Inc. All Rights Reserved.

Use of this source code is governed by a BSD-type license.
See the COPYING file for details.
-->

<style type="text/excss">

@trait midPoint {
  color: green;
  background-color: pink;
}

@keyframes simple  {
  0% { color: black; background-color: white; }
  20% { color: black; background-color: white; }
  40%, 60% { @mixin midPoint; }
  80% { color: white; background-color: black; }
  100% { color: white; background-color: black; }
}
</style>

<div keyframeName="simple" delay="0" expect="color: black; background-color: white">Foo</div>
<div keyframeName="simple" delay="0.5" expect="color: green; background-color: pink">Bar</div>
<div keyframeName="simple" delay="1" expect="color: white; background-color: black">Baz</div>

<script src="../../excss.js"></script>
<script src="../tests.js"></script>

